<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>表格</title>
<!-- basic styles -->

<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="assets/css/font-awesome.min.css" />

<!-- page specific plugin styles -->

<!-- fonts -->
<!-- ace styles -->
<link rel="stylesheet" href="assets/css/jquery-ui-1.10.3.full.min.css" />

<link rel="stylesheet" href="assets/css/ace.min.css" />
<link rel="stylesheet" href="assets/css/ace-rtl.min.css" />
<link rel="stylesheet" href="assets/css/ace-skins.min.css" />

<link rel="stylesheet" href="assets/css/ace-ie.min.css" />

<!-- inline styles related to this page -->

<!-- ace settings handler -->

<script src="assets/js/ace-extra.min.js"></script>

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<script src="assets/js/respond.src.js"></script>

<style type="text/css">
.dataTables_wrapper .row:first-child {
	padding-top: 0px;
	padding-bottom: 0px;
	background-color: #eff3f8
}

.custome-row {
	padding-top: 8px;
	padding-bottom: 0px;
	background-color: #eff3f8;
}

.custome-row label {
	font-size: 13px;
}

.btn-jit {
	font-size: 18px;
}	
</style>
</head>

<body>
	<div class="main-container" id="main-container">
		<div class="main-container-inner">
			<div class="main-content" style="padding-left: 0; margin-left: 0;">
				<div class="breadcrumbs" id="breadcrumbs">
					<ul class="breadcrumb">
						<li><i class="icon-home home-icon"></i> <a href="#">Home</a>
						</li>

						<li><a href="#">Tables</a></li>
						<li class="active">Simple &amp; Dynamic</li>
					</ul>
					<!-- .breadcrumb -->

					<div class="nav-search" id="nav-search">
						<form class="form-search">
							<span class="input-icon"> <input type="text"
								placeholder="Search ..." class="nav-search-input"
								id="nav-search-input" autocomplete="off" /> <i
								class="icon-search nav-search-icon"></i>
							</span>
						</form>
					</div>
					<!-- #nav-search -->
				</div>

				<div class="page-content">
					<!--  
					<div class="page-header">
						<h1>
							Tables <small> <i class="icon-double-angle-right"></i>
								Static &amp; Dynamic Tables
							</small>
						</h1>
					</div>
					-->
					<!-- /.page-header -->

					<div class="row">
						<div class="col-xs-12">
							<!-- PAGE CONTENT BEGINS -->
							<div class="tabbable">
								<ul class="nav nav-tabs" id="myTab">
									<li class="active">
										<a data-toggle="tab" href="#home" style="font-size: 16px;">
											<i class="blue icon-certificate bigger-150"></i> 站点证书管理
										</a>
									</li>
									<div class="space-4"></div>
									<div class="tab-content">
										<div id="home" style="padding-top: 15px;">
											<h3 class="row header smaller lighter blue">
												<span class="col-sm-7"> <i class="icon-asterisk"></i>
													站点证书信息
												</span>

											</h3>
											<ul class="nav nav-pills">
												<div class="profile-user-info profile-user-info-striped">
													<div class="profile-info-row">
														<div class="profile-info-name">证书主题</div>

														<div class="profile-info-value">
															<span class="editable" id="username">CN=192.168.0.1</span>
														</div>
													</div>

													<div class="profile-info-row">
														<div class="profile-info-name">证书序列号</div>

														<div class="profile-info-value">
															<span class="editable" id="username">7fb029f3f73a991c289c56f99a3f278a</span>
														</div>
													</div>
													<div class="profile-info-row">
														<div class="profile-info-name">证书颁发者</div>

														<div class="profile-info-value">
															<span class="editable" id="age">CN=JIT CA,OU=www.jit.com.cn,O=JIT,C=CN</span>
														</div>
													</div>

													<div class="profile-info-row">
														<div class="profile-info-name">证书有效时间</div>

														<div class="profile-info-value">
															<span class="editable" id="about">2008-11-11 10:07:11  至  2018-11-09 10:07:11</span>
														</div>
													</div>
												</div>
											</ul>
											<h3 class="row header smaller lighter blue">
												<span class="col-sm-7"> <i
													class="icon-comment"></i> 站点证书管理
												</span>

											</h3>

											<ul class="nav nav-pills">
												<form class="form-horizontal" role="form">
													<div class="form-group">
														<label class="col-sm-1 control-label no-padding-right"
															for="form-field-1"> 证书来源: </label>
														<div class="col-sm-9" style="padding-top: 5px;">
															<input name="cert123" type="radio" value="1" /><label>导入外部证书(pfx.p12)</label> 
															<input name="cert123" type="radio" value="1" checked='true' /><label>产生本地证书导入本地证书</label>
														</div>
													</div>

													<span class="label label-info arrowed-in arrowed-right">
														第一步
													</span>
													<div class="space-4"></div>
													<div class="form-group">
														<label class="col-sm-2 control-label no-padding-right"
															for="form-field-6">申请证书主题</label>

														<div class="col-sm-9">
															<input data-rel="tooltip" type="text" id="form-field-6"
																placeholder="Tooltip on hover" title="Hello Tooltip!"
																data-placement="bottom" class="col-sm-4"/>
															<span class="help-button"
																data-rel="popover" data-trigger="hover"
																data-placement="left" data-content="More details."
																title="Popover on hover">?</span>
														</div>
													</div>
													<div class="form-group">
														<label class="col-sm-2 control-label no-padding-right"
															for="form-field-1"> 秘钥算法 </label>

														<div class="col-sm-9">
															<select id="form-field-select-1" class="col-sm-4 no-padding-right">
																<option value="AL">RSA</option>
																<option value="AK">Alaska</option>
																<option value="AZ">Arizona</option>
															</select>
															<span class="help-button"
																data-rel="popover" data-trigger="hover"
																data-placement="left" data-content="More details."
																title="Popover on hover">?</span>
														</div>
													</div>
													<div class="form-group">
														<label class="col-sm-2 control-label no-padding-right no-padding-right"
															for="form-field-1"> 设备类型 </label>

														<div class="col-sm-9">
															<select id="form-field-select-1" class="col-sm-4 no-padding-right">
																<option value="AL">软件库</option>
																<option value="AK">Alaska</option>
																<option value="AZ">Arizona</option>
															</select>
															<span class="help-button"
																data-rel="popover" data-trigger="hover"
																data-placement="left" data-content="More details."
																title="Popover on hover">?</span>
														</div>
													</div>
													<div class="form-group">
														<label class="col-sm-2 control-label no-padding-right"
															for="form-field-1"> 秘钥长度 </label>

														<div class="col-sm-9">
															<select id="form-field-select-1" class="col-sm-4 no-padding-right">
																<option value="AL">1024</option>
																<option value="AK">Alaska</option>
																<option value="AZ">Arizona</option>
															</select>
															<span class="help-button"
																data-rel="popover" data-trigger="hover"
																data-placement="left" data-content="More details."
																title="Popover on hover">?</span>
														</div>
													</div>
												</form>
												<span class="label label-info  arrowed-in arrowed-right">第二步</span>
												<div class="row">
													<div class="space-4"></div>
													<div class="col-sm-1"></div>
													<button class="btn btn-primary">
														<i class="icon-bookmark"></i>
														产生申请
													</button>
													<button class="btn btn-primary">
														<i class="icon-download"></i>
														下载到文件
													</button>
													<button class="btn btn-primary">
														<i class="icon-copy"></i>
														复制到剪切板
													</button>
												</div>
												<div class="space-4"></div>
												<span class="label label-info arrowed-in arrowed-right">第三步</span>
												<div class="space-4"></div>
												<form class="form-horizontal" role="form">
													<div class="form-group">
														<label class="col-sm-2 control-label no-padding-right"
															for="form-field-1"> 证书申请数据(P10) </label>
														<div class="col-sm-10">
															<textarea   id="form-field-8" rows="6" cols="81"
																placeholder="Default Text" class="col-sm-4 no-padding"></textarea>

														</div>
													</div>
													<div class="form-group">
														<label class="col-sm-2 control-label no-padding-right"
															for="form-field-1">导入站点证书 </label>
														<div class="col-sm-10">
															<div class="col-sm-4 no-padding">
															<input  type="file" id="file1"/>
															</div>
														</div>
													</div>
													
												</form>
											</ul>
										</div>
										<div class="form-actions center" style="padding-left: 0px;padding-right: 0px;margin-left: 0px;margin-right: 0px;">
											<button class="btn btn-info btn-jit">
												<i class="icon-save"></i>
												保存
											</button>
										</div>
									</div>
							</div>
						</div>
					</div>
					<!-- /.col -->
				</div>
				<!-- /.row -->
			</div>
			<!-- /.main-content -->
		</div>
		<!-- /.main-container-inner -->
	</div>
	<!-- /.main-container -->

	<!-- basic scripts -->
	<script src="assets/js/jquery-1.10.2.min.js"></script>


	<script src="assets/js/bootstrap.min.js"></script>
	<script src="assets/js/typeahead-bs2.min.js"></script>

	<!-- page specific plugin scripts -->

	<script src="assets/js/jquery.dataTables.min.js"></script>
	<script src="assets/js/jquery.dataTables.bootstrap.js"></script>

	<script src="assets/js/jquery-ui-1.10.3.full.min.js"></script>
	<script src="assets/js/jquery.ui.touch-punch.min.js"></script>
	<!-- ace scripts -->

	<script src="assets/js/ace-elements.min.js"></script>
	<script src="assets/js/ace.min.js"></script>

	<!-- inline scripts related to this page -->

	<script src="assets/js/bootbox.min.js"></script>
	
	<script type="text/javascript">
	jQuery(function($){
	$('#file1').ace_file_input({
		no_file:'导入扩展名为.cer .crt .p7b的证书文件',
		btn_choose:'浏览...',
		btn_change:'重新选择',
		droppable:false,
		onchange:null,
		thumbnail:false //| true | large
		//whitelist:'gif|png|jpg|jpeg'
		//blacklist:'exe|php'
		//onchange:''
		//
	});
	});
	
	</script>

</body>
</html>
